<template>
  <div>
    <!--头部-->
    <el-header id="head">
      <div id="headCheck">
        <!-- 下拉选择学期 -->
        <span>开课学期：</span>
        <el-select
            class="term-select"
            @change="handleTermsChange"
            v-model="termValue"
            placeholder="请选择学期"
        >
          <el-option v-for="(item,index) in termData" :key="index" :value="item"></el-option>
        </el-select>
        <!-- 下拉选择学院 -->
        <span style="margin-left: 10px">开课学院：</span>
        <el-select
            class="college-select"
            @change="handleCollegesChange"
            v-model="collegeValue"
            placeholder="请选择学院"
        >
          <el-option v-for="(item,index) in collegeData" :key="index" :value="item"></el-option>
        </el-select>
        <span style="margin-left: 10px">课程名：</span>
        <el-input
            placeholder="请输入内容"
            v-model="inputCourse"
            clearable
            style="width: 150px">
        </el-input>
        <el-button type="warning" round @click="searchCourse" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="addCourseTask">手动添加课程</el-button>
      </div>
    </el-header>

    <!--主体-->
    <el-main id="main">
      <template>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
        >
          <el-table-column
              fixed
              prop="courseId"
              label="课程编号"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="课程名"
          >
          </el-table-column>
          <el-table-column
              prop="testMethod"
              label="考察方式"
              :formatter="testMethodFormat"
          >
          </el-table-column>
          <el-table-column
              prop="status"
              label="课程性质"
              :formatter="statusFormat"
          >
          </el-table-column>
          <el-table-column
              prop="periodTime"
              label="单节课时"
          >
          </el-table-column>
          <el-table-column
              prop="allPeriodTime"
              label="总课时"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button
                  @click="editRow(scope.$index, scope.row)"
                  type="warning"
                  size="small">
                编辑
              </el-button>
              <el-button
                  @click="deleteRow(scope.$index, scope.row)"
                  type="danger"
                  size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="添加课程" :visible.sync="visible">
          <el-form :model="addCourseForm" label-position="left" label-width="80px" :rules="addCourseRules">
            <el-form-item label="学期" prop="term">
              <el-select
                  class="term-select"
                  @change="handleTermsChange"
                  v-model="addCourseForm.term"
                  placeholder="请选择学期"
              >
                <el-option v-for="(item,index) in termData" :key="index" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学院" prop="college">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="addCourseForm.college"
                  placeholder="请选择学院"
              >
                <el-option v-for="(item,index) in collegeData" :key="index" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程名" prop="name">
              <el-input v-model="addCourseForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="考察方式" prop="testMethod">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="addCourseForm.testMethod"
                  placeholder="请选择考察方式"
              >
                <el-option v-for="item in testMethodData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程性质" prop="status">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="addCourseForm.status"
                  placeholder="请选择课程性质"
              >
                <el-option v-for="item in statusData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单节课时" prop="periodTime">
              <el-input v-model="addCourseForm.periodTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="总课时" prop="allPeriodTime">
              <el-input v-model="addCourseForm.allPeriodTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="addCourse()">提 交</el-button>
          </div>
        </el-dialog>


        <!--编辑对话框-->
        <el-dialog title="编辑课程信息" :visible.sync="editVisible">
          <el-form :model="editCourseForm" label-position="left" label-width="80px">
            <el-form-item label="开设学期" prop="term">
              <el-input
                  v-model="this.termValue"
                  :disabled="true">
              </el-input>
            </el-form-item>
            <el-form-item label="开设学院" prop="college">
              <el-input
                  v-model="this.collegeValue"
                  :disabled="true">
              </el-input>
            </el-form-item>
            <el-form-item label="课程名" prop="name">
              <el-input v-model="editCourseForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="考察方式" prop="testMethod">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="editCourseForm.testMethod"
                  placeholder="请选择考察方式"
              >
                <el-option v-for="item in testMethodData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程性质" prop="status">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="editCourseForm.status"
                  placeholder="请选择课程性质"
              >
                <el-option v-for="item in statusData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单节课时" prop="periodTime">
              <el-input v-model="editCourseForm.periodTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="总课时" prop="allPeriodTime">
              <el-input v-model="editCourseForm.allPeriodTime" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateCourse()">提 交</el-button>
          </div>
        </el-dialog>
      </template>
    </el-main>
    <el-footer id="footer">
      <!-- 上一页，当前页，下一页 -->
      <div class="footer-button">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </div>

</template>

<script>

export default {
  name: "CourseInfo",
  data() {
    return {
      termData: [],
      collegeData: [],
      testMethodData: [
        {
          label: '考试',
          value: 1
        },
        {
          label: '考查',
          value: 2
        }
      ],
      statusData: [
        {
          label: '通识必修课',
          value: 1
        },
        {
          label: '通识选修课',
          value: 2
        },
        {
          label: '专业必修课',
          value: 3
        },
        {
          label: '专业选修课',
          value: 4
        }
      ],

      // 是否支持dialog
      visible: false,
      editVisible: false,
      // dialog表单内数据
      addCourseForm: {
        term: '',
        college: '',
        name: '',
        testMethod: '',
        status: '',
        periodTime: 0,
        allPeriodTime: 0
      },
      editCourseForm: {
        term: '',
        college: '',
        name: '',
        testMethod: '',
        status: '',
        periodTime: 0,
        allPeriodTime: 0
      },
      // dialog表单验证规则
      addCourseRules: {
        term: [{required: true, message: '请输入学期', trigger: 'blur'}],
        college: [{required: true, message: '请输入学院', trigger: 'blur'}],
        name: [{required: true, message: '请输入课程名', trigger: 'blur'}],
        testMethod: [{required: true, message: '请输入考察方式', trigger: 'blur'}],
        status: [{required: true, message: '请输入课程性质', trigger: 'blur'}],
        periodTime: [{required: true, message: '请输入单次课课时', trigger: 'blur'}],
        allPeriodTime: [{required: true, message: '请输入总课时', trigger: 'blur'}]
      },

      // 当前选择的学期
      term: "2022-2023-1",
      // 学期选择绑定的值
      termValue: "2022-2023-1",

      college: '信息学院',
      collegeValue: "信息学院",

      page: 1,
      pageSize: 2,
      total: 0,

      tableData: [],
      inputCourse: ''

    }
  },
  mounted() {
    this.getTerm();
    this.getCollege();
    this.getCourseByTermAndCollege(this.term, this.college);
  },
  methods: {
    // 删除行
    deleteRow(index, row) {
      // 创造本行对象
      let target = Object.assign({}, row);
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/courseInfoManagement/deleteCourseById/' + target.courseId,
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.getCourseByTermAndCollege(this.termValue, this.collegeValue)
          this.$message({message: "删除课程成功！", type: "success"})
          // 前端删除本行的动画
          row.splice(index, 1);
        }
      })
    },
    // 编辑行
    editRow(index, row) {
      this.editVisible = true;
      this.editCourseForm = Object.assign({}, row);
    },
    // 获取所有学期
    getTerm() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/courseInfoManagement/getAllTerm',
          }
      ).then(res => {
        if (res.data.code === 200) {
          let ret = res.data.data
          this.termData = ret.terms
        }
      })

    },
    // 获取所有学院
    getCollege() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/courseInfoManagement/getAllColleges',
          }
      ).then(res => {
        if (res.data.code === 200) {
          let ret = res.data.data
          this.collegeData = ret.colleges

        }
      })

    },
    // 手动添加课程
    addCourse() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/chooselesson/courseInfoManagement/addCourse",
            data: this.addCourseForm
          }
      )
          .then(res => {
            if (res.data.code === 200) {
              // 添加完成
              this.getCourseByTermAndCollege(this.addCourseForm.term, this.addCourseForm.college)
              this.visible = false
              this.$message({message: "添加课程成功！", type: "success"})
            } else {
              alert(res.data.message)
            }
          })
          .catch(error => {

          })
    },
    // 获取选定学期选定学院的课程
    getCourseByTermAndCollege(term, college) {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/chooselesson/courseInfoManagement/getCourseByTermAndCollege",
            data: {
              term: term,
              college: college,
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.getTotal(term, college);
        }
      })
    },
    // 获取当前条件下课程信息的总条数
    getTotal(term, college) {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'get',
        url: "http://localhost:8085/chooselesson/courseInfoManagement/" +
            "getTotalLineByTermAndCollege/" + term + "/" + college
      }).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
        }
      })
    },
    // 考察方式信息转换
    testMethodFormat(row, column, cellValue, index) {
      switch (cellValue) {
        case 1:
          return '考试';
        case 2:
          return '考查';
      }
    },
    // 课程性质信息转换
    statusFormat(row, column, cellValue, index) {
      switch (cellValue) {
        case 1:
          return '通识必修课';
        case 2:
          return '通识选修课';
        case 3:
          return '专业必修课';
        case 4:
          return '专业选修课';
      }
    },
    // 搜索指定课程
    searchCourse() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/chooselesson/courseInfoManagement/getCoursesBySearchingName",
            data: {
              term: this.term,
              college: this.college,
              course: this.inputCourse,
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.getTotalBySearchingName(this.term, this.college, this.inputCourse);
        }
      })
    },
    // 查询指定课程的条数
    getTotalBySearchingName(term, college, course) {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'get',
        url: "http://localhost:8085/chooselesson/courseInfoManagement/" +
            "getTotalLineBySearchingCourse/" + term + "/" + college + '/' + course
      }).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
        }
      })
    },
    // 学期绑定值
    handleTermsChange(val) {
      this.term = val;
      this.getCourseByTermAndCollege(this.term, this.college);
      this.inputCourse = ''
    },
    // 学院绑定值
    handleCollegesChange(val) {
      this.college = val;
      this.getCourseByTermAndCollege(this.term, this.college);
      this.inputCourse = ''
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.getCourseByTermAndCollege(this.term, this.college);
    },
    handleCurrentChange(v) {
      this.page = v;
      this.getCourseByTermAndCollege(this.term, this.college);
    },
    // 手动添加排课按钮响应
    addCourseTask() {
      this.visible = true;
    },
    // 更新课程信息
    updateCourse() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'post',
        url: "http://localhost:8085/chooselesson/courseInfoManagement/updateCourse",
        data: this.editCourseForm
      }).then(res => {
        if (res.data.code === 200) {
          // 添加完成
          this.getCourseByTermAndCollege(this.termValue, this.collegeValue)
          this.editVisible = false
          this.$message({message: "编辑课程成功！", type: "success"})
        } else {
          alert(res.data.message)
        }
      }).catch(error => {
      })
    },
  },


}
</script>

<style>

#head {
}

#headCheck {
}

#main {
}

#footer {
  width: 100%;
}


</style>